<template>
    <el-dialog :title="`${formData.id?'修改':'添加'}收货地址`" :visible.sync="dialogVisible" width="50%"
               :before-close="handleClose">

        <div style="padding: 0 150px">
            <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
                <el-form-item label="收货人" prop="receiver">
                    <el-input v-model="formData.receiver"/>
                </el-form-item>
                <el-form-item label="手机号" prop="contact">
                    <el-input v-model="formData.contact" maxlength="11"/>
                </el-form-item>
                <el-form-item label="地区" prop="fullLocation">
                    <XtxCity :fullLocation="formData.fullLocation" @change="changeCity" placeholder="请选择所在地区"/>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="formData.address"/>
                </el-form-item>
                <el-form-item label="邮政编码" prop="postalCode">
                    <el-input v-model="formData.postalCode" maxlength="6"/>
                </el-form-item>
                <el-form-item label="地址标签" prop="addressTags">
                    <el-input v-model="formData.addressTags"/>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
    </el-dialog>
</template>

<script>
    import XtxCity from "@/components/library/xtx-city";
    import {addAddress, editAddress} from "@/api/order";

    export default {
        name: "AddressEdit",
        components: {XtxCity},
        data() {
            const checkMobile = (rule, value, callback) => {
                if (!/^1[3-9]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式不正确'));
                }
                callback();
            };
            return {
                dialogVisible: false,
                formData: {
                    id: null,
                    receiver: null,
                    contact: null,
                    provinceCode: null,
                    cityCode: null,
                    countyCode: null,
                    address: null,
                    postalCode: null,
                    addressTags: null,
                    isDefault: 0,
                    // 城市组件显示文字（完整行政区地址）
                    fullLocation: null
                },
                rules: {
                    receiver: [{required: true, message: '请输入收货人', trigger: 'blur'},],
                    contact: [{required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: checkMobile, trigger: 'blur'}],
                    fullLocation: [{required: true, message: '请选择所在地区', trigger: 'blur'},],
                    address: [{required: true, message: '请输入详细地址', trigger: 'blur'},],
                    postalCode: [{required: true, message: '请输入邮政编码', trigger: 'blur'},],
                    addressTags: [{required: true, message: '请输入地址标签', trigger: 'blur'},],
                }
            }
        },
        methods: {
            open(address) {
                if (address.id) {
                    for (const key in address) {
                        this.formData[key] = address[key]
                    }
                }
                this.dialogVisible = true
            },
            handleClose() {
                this.formData = {
                    id: null,
                    receiver: null,
                    contact: null,
                    provinceCode: null,
                    cityCode: null,
                    countyCode: null,
                    address: null,
                    postalCode: null,
                    addressTags: null,
                    isDefault: 0,
                    // 城市组件显示文字（完整行政区地址）
                    fullLocation: null
                }
                this.dialogVisible = false
                this.$refs.form.resetFields()
            },
            // 城市选中
            changeCity(result) {
                this.formData.provinceCode = result.provinceCode
                this.formData.cityCode = result.cityCode
                this.formData.countyCode = result.countyCode
                this.formData.fullLocation = result.fullLocation
            },
            submit() {
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        if (this.formData.id) {
                            await editAddress(this.formData)
                            this.$message.success('修改收货地址成功')
                        } else {
                            const {result} = await addAddress(this.formData)
                            this.formData.id = result.id
                            this.$message.success('添加收货地址成功')
                        }
                        this.$emit('on-success', this.formData)
                        this.handleClose()
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">

    .xtx-city {
        width: 345px;

        /deep/ .select {
            border-radius: 4px;
            height: 40px;
            line-height: 38px;
            display: flex;
            padding: 0 10px;
            justify-content: space-between;

            .placeholder {
                color: #ccc;
            }

            i {
                color: #ccc;
                font-size: 18px;
            }

            .value {
                font-size: 14px;
            }
        }

        /deep/ .option {
            top: 49px;
        }
    }

</style>